<template>
    <div class="adddressb">
        <p class="perrightwdzl">新增加地址</p>
        <div class="perform">
            <form action>
                <div class="input-box">
                姓名
                <input type="text" class="inputf" :readonly="isreadonly" v-model="data.name">
                </div>

                <div class="input-box">
                联系电话(11位)
                <input type="text" class="inputf" :readonly="isreadonly" v-model="data.phone">
                </div>
                <div class="input-box">
                  地址
                  <div class="input-box-dz" v-if="isv">
                      <v-distpicker :province="province" :city="city" :disabled="isreadonly" hide-area @selected="onSelected"></v-distpicker>
                  </div>
                </div>
                <div class="input-box">
                详细地址
                <input type="text" class="inputf" :readonly="isreadonly" v-model="data.detail">
                </div>
                <div class="input-box">
                    <input type="button" value="提交" class="mytb" @click="saveclick">
                </div>
            </form>
        </div>
    </div>
</template>
<script>
import Distpicker from "v-distpicker";
import { mapGetters, mapActions } from "vuex";
import async from "async";
export default {
  components: { VDistpicker: Distpicker },
  data() {
    return {
      isreadonly:false,
      isv:true,
      province:"北京市",
      city:"北京城区",
      data: {
        uid: "2",
        name: "",
        phone: "",
        province: '北京市',
        city: "北京城区",
        detail: ""
      },
      data1:{
        uid: "2",
        name: "",
        phone: "",
        province: '北京市',
        city: "北京城区",
        detail: ""
      }
    };
  },
  methods: {
    adddress(){
      this.$emit("add")
    },
    onSelected(data) {
      console.log(data.province)
      this.data.province = data.province.value;
      this.data.city = data.city.value;
    },
    saveclick() {
      var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
      if(myreg.test(this.data.phone)){

      }else{
        alert("请输入正确联系电话")
        return ;
      }
			if(this.data.name&&myreg.test(this.data.phone)&&this.data.detail){
				if (!this.isreadonly) {
				  this.axios({
				    method: "post",
				    url: `${this.$config.dataUrl}/users/address`,
				    params: this.data,
				  }).then(res => {
				    this.data=this.data1;
				    alert("添加成功")
				    this.$emit("searchall")
				  });
			}
      }else{
				alert("请输入完成信息")
			}
    },
    newaddress() {}
  },
  computed: {
    ...mapGetters(["login", "uid"]) //boolean
  },
  watch:{
    province(val){
      this.data.province=val;
    },
    city(val){
      this.data.city=val
    }
  },
  beforeMount() {
    this.data.uid=this.uid;
    this.data1.uid=this.uid
  }
};
</script>
<style  scoped>
.perrightwdzl {
  margin-top: 0.13rem;
  font-size: 0.16rem;
  margin-bottom: 0;
}
.input-box {
  margin-top: 0.2rem;
}
.mytb {
  background-color: #b49d7e;
  width: 0.5rem;
  height: 0.3rem;
  border: 0;
  color: #fffefe;
  font-size: 0.12rem;
  float: left;
  cursor: pointer;
}
.mytb2 {
  margin-left: 0.2rem;
}
.sexbtn {
  width: 0.5rem;
  height: 0.3rem;
  border: 0;
  color: #000;
  outline: none;
  float: left;
}
.sexbtn.active {
  background-color: #b49d7e;
  color: #fffefe;
}
.perform {
  font-size: 0.12rem;
  line-height: 1em;
}
.inputf {
  display: block;
  height: 0.5rem;
  width: 3.8rem;
  outline: none;
  border: 0.01rem #ccc solid;
  padding-left: 0.1rem;
  background-color: #f2f2f2;
  margin-top: 0.06rem;
}
.input-box-dz {
  margin-top: 0.06rem;
  cursor: pointer;
  font-size: 0.16rem;
}
</style>
<style>
.input-box .distpicker-address-wrapper select {
  background-color: #f2f2f2;
}
</style>
<style>
.input-box .input-box-dz select {
  font-size: 0.16rem;
  padding: 0;
  border-radius: 0;
}
.adddressb .input-box-dz select {
  cursor:pointer
}
</style>
